<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="path" value="${pageContext.request.contextPath}" scope="page"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="${path}/css/bootstrap.min.css" rel="stylesheet" />
<!-- SweetAlert -->
<link href="${path}/css/sweetalert2.min.css" rel="stylesheet" />
<!-- My CSS -->
<link href="${path}/css2/css-index.css" rel="stylesheet" type="text/css">
<link href="${path}/css2/SmallBookList.css" rel="stylesheet" type="text/css">

<script type="text/javascript"
	src="http://at.alicdn.com/t/font_885398_i0dlzjs87c.js"></script>
</head>
<body>

	<div id="login-modal" class="modal fade not-select" tabindex="-1"
		role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">登陆</h4>
				</div>
				<div class="modal-body">
					<form class="">
						<div id="username-group" class="form-group has-feedback">
							<label for="input-username" class="control-label">账号:</label> <input
								id="input-username" type="text" maxlength="20" name="username"
								class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="username-help" class="help-block"></span>
						</div>
						<div id="password-group" class="form-group has-feedback">
							<label for="input-password" class="control-label">密码:</label> <input
								id="input-password" maxlength="20" type="password"
								name="password" class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="password-help" class="help-block"></span>
						</div>
						<div class="form-group">
							<label for="input-verify" class="control-label">验证码:</label>
							<div id="verify-group" class="input-group has-feedback"
								style="width: 100%;">
								<input id="input-verify" maxlength="6" type="text" name="verify"
									class="form-control"> <span
									class="glyphicon form-control-feedback" aria-hidden="true"
									style="right: 100px;"></span> <span id="img-verify"
									class="input-group-addon verify-span btn btn-default"
									style="width: 100px;"></span>
							</div>
							<span id="verify-help" class="help-block"></span>
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label><input id="save" type="checkbox" value="">记住密码</label>
							</div>
						</div>
					</form>
					<hr />
					<div id="other-load-div">
						<svg id="QQ" class="icon" aria-hidden="true">
						<use xlink:href="#icon-qq"></use>
					</svg>
						<svg id="WeiXin" class="icon" aria-hidden="true">
						<use xlink:href="#icon-weixin"></use>
					</svg>
						<svg id="WeiBo" class="icon" aria-hidden="true">
						<use xlink:href="#icon-xinlangweibo"></use>
					</svg>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button id="login" type="button" class="btn btn-primary">&nbsp;&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;陆&nbsp;&nbsp;</button>
				</div>
			</div>
		</div>
	</div>

	<div id="register-modal" class="modal fade not-select" tabindex="-1"
		role="dialog">
		<div class="modal-dialog" role="document" style="width: 500px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">注册</h4>
				</div>
				<div class="modal-body">
					<form class="bs-example bs-example-form">
						<div id="_nickname-group" class="form-group has-feedback">
							<label for="_input-nickname" class="control-label">昵称:</label> <input
								id="_input-nickname" type="text" maxlength="12" name="username"
								class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="_nickname-help" class="help-block">一个较长的帮助文本块</span>
						</div>
						<div id="_phone-group" class="form-group has-feedback">
							<label for="_input-phone" class="control-label">手机:</label> <input
								id="_input-phone" type="text" maxlength="11" name="phone"
								class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="_phone-help" class="help-block">一个较长的帮助文本块</span>
						</div>
						<div id="_password-group" class="form-group has-feedback">
							<label for="_input-password" class="control-label">密码:</label> <input
								id="_input-password" maxlength="20" type="password"
								name="password" class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="_password-help" class="help-block">一个较长的帮助文本块，超。</span>
						</div>
						<div id="_password-group2" class="form-group has-feedback">
							<label for="_input-password2" class="control-label">确认密码:</label>
							<input id="_input-password2" maxlength="20" type="password"
								name="password" class="form-control"> <span
								class="glyphicon form-control-feedback" aria-hidden="true"></span><span
								id="_password-help2" class="help-block">一个较长的帮助文本块，超。</span>
						</div>


						<div id="_verify-group" class=form-group>
							<label for="_input-verify" class="control-label">验证码:</label>
							<div class="form-group">
								<div class="input-group" style="width: 100%;">
									<input id="_input-verify" maxlength="6" type="text"
										name="verify" class="form-control" style="width: 100%;">
									<span class="glyphicon form-control-feedback"
										aria-hidden="true" style="right: 100px"></span> <span
										id="_show-verify" class="input-group-addon btn btn-default"
										style="width: 100px;"></span>
								</div>
							</div>
							<span id="_verify-help" class="help-block">一个较长的帮dddd助文本块。</span>
						</div>


						<div id="_verify-phone-group" class=form-group>
							<label for="_input-phone-number" class="control-label">短信验证码:</label>
							<div class="form-group">
								<div class="input-group" style="width: 100%;">
									<input id="_input-phone-number" type="text" maxlength="6"
										class="form-control"> <span
										class="glyphicon form-control-feedback" aria-hidden="true"
										style="right: 100px"></span><span id="_get-phone-verify"
										class="input-group-addon btn btn-default"
										style="width: 100px;"></span>
								</div>
							</div>
							<span id="_phone-number-help" class="help-block">一个较长的帮助文本块。</span>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button id="register" type="button" class="btn btn-primary">&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;&nbsp;</button>
				</div>
			</div>
		</div>
	</div>

	<div id="top">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation"
			style="overflow-x: hidden">
			<div class="container-fluid"></div>
			<div class="navbar-header">
				<a class="navbar-brand" href="${path}/page/index.do">校园图书</a>
			</div>
			<form class="navbar-form navbar-left" role="search">
				<div class="input-group">
					<input id="top_search" type="text" class="form-control input-sm"
						placeholder="search" /> <span id="btn_search"
						class="btn btn-default input-group-addon" aria-label="Left Align"><span
						class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
				</div>
			</form>
			<div>
				<ul class="nav navbar-nav navbar-right">
					<li id="btn-login" data-toggle="modal" data-target="#login-modal" class="${user == null ? 'show' : 'hide'}"><a
						href="#">登陆</a></li>
					<li id="btn-register" data-toggle="modal" class="${user == null ? 'show' : 'hide'}"
						data-target="#register-modal"><a href="#">免费注册</a></li>
					<li id="top-user" class="${user != null ? 'show' : 'hide'}"><a href="${path}/page/user.do">${user != null ? user.nickname : ''}</a></li>
					<li id="top-remove-user" class="${user != null ? 'show' : 'hide'}"><a href="#">退出</a></li>
					<li><a href="#">我的借书</a></li>
					<li><a href="#">我要借书</a></li>
					<li><a id="phone-book" href="#"><span class="glyphicon glyphicon-phone"></span>手机图书</a></li>
					<li><a id="wei-book" href="#"><span class="glyphicon glyphicon-phone"></span>微信公共号</a></li>
				</ul>
			</div>
		</nav>
        <div id="phone-book-image" class="top-pup-box">

        </div>
        <div id="wei-book-image" class="top-pup-box">

        </div>
	</div>

	<div id="search-div" class="container">
		<div class="form-inline col-md-8 col-md-offset-2">
			<div class="input-group" style="width: 100%">
				<input id="small-search" type="text" class="form-control input-lg" />
				<span class="btn btn-default input-group-addon"
					aria-label="Left Align" style="width: 18%"> <span
					class="glyphicon glyphicon-search" aria-hidden="true"
					style="font-size: 20px;"></span> <label class="sr-only"
					for="small-search">search</label>
				</span>
			</div>
			<div>
				<span class="label label-default">热搜</span>
				<%--@elvariable id="hots" type="java.util.List"--%>
				<c:forEach var="item" items="${hots}">
                    <a class="label label-info" href="#"><c:out value="${item}"/></a>
				</c:forEach>
			</div>
		</div>
	</div>

	<div id="menu-div" class="container" style="margin-top: 10px;">
		<div id="wrap-menu" class="col-md-3 scroll-box" role="group"
			data-toggle="buttons" style="padding: 0;">
			<ul id="list-type-menu" class="scroll-y list-unstyled">
				<li data-target="#wrap1">
					<h5>经济管理</h5>
					<div class="flex">
						<a>市场营销</a> <a>经济学理论</a> <a>国际贸易</a> <a>物流管理</a> <a>管理学原理</a> <a>财务管理</a>
					</div>
				</li>
				<li data-target="#wrap2">
					<h5>文学艺术</h5>
					<div class="flex">
						<a>设计</a> <a>音乐</a> <a>青春文学</a> <a>绘画</a> <a>外国文学</a> <a>人物传记</a>
					</div>
				</li>
				<li data-target="#wrap3">
					<h5>人文社科</h5>
					<div class="flex">
						<a>数学</a> <a>英语教材</a> <a>化学</a> <a>日语</a> <a>生物科学</a> <a>专业英语</a>
					</div>
				</li>
				<li data-target="#wrap4">
					<h5>科学技术</h5>
					<div class="flex">
						<a>语言与编程</a> <a>电子通信</a> <a>电工电子</a> <a>数据库</a> <a>建筑工程</a> <a>土木工程</a>
					</div>
				</li>
				<li data-target="#wrap5">
					<h5>生活休闲</h5>
					<div class="flex">
						<a>家庭保健</a> <a>美食烹饪</a> <a>导游必备</a> <a>地理学理论</a> <a>动漫卡通</a> <a>球类</a>
					</div>
				</li>
				<li data-target="#wrap6">
					<h5>流行小说</h5>
					<div class="flex">
						<a>东野吾圭</a> <a>推理小说</a> <a>科幻小说</a> <a>青春文学</a> <a>轻小说</a> <a>金庸</a>
					</div>
				</li>
			</ul>

		</div>

		<div id="wrap" class="col-md-9" style="padding: 0;">
			<div id="wrap1" class="hide wrap-box type_wrap">
				<div>
					经济管理······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>经济学<span>(100293)</span></a>
						</td>
						<td>
							<a>管理<span>(100293)</span></a>
						</td>
						<td>
							<a>经济<span>(100293)</span></a>
						</td>
						<td>
							<a>商业<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>金融<span>(100293)</span></a>
						</td>
						<td>
							<a>投资<span>(100293)</span></a>
						</td>
						<td>
							<a>营销<span>(100293)</span></a>
						</td>
						<td>
							<a>理财<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>创业<span>(100293)</span></a>
						</td>
						<td>
							<a>广告<span>(100293)</span></a>
						</td>
						<td>
							<a>股票<span>(100293)</span></a>
						</td>
						<td>
							<a>企业史<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>策划<span>(100293)</span></a>
						</td>
					</tr>
					</tbody>

				</table>
			</div>
			<div id="wrap2" class="hide wrap-box type_wrap">
				<div>
					文学艺术······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>小说<span>(100293)</span></a>
						</td>
						<td>
							<a>外国文学<span>(100293)</span></a>
						</td>
						<td>
							<a>文学<span>(100293)</span></a>
						</td>
						<td>
							<a>随笔<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>中国文学<span>(100293)</span></a>
						</td>
						<td>
							<a>经典<span>(100293)</span></a>
						</td>
						<td>
							<a>日本文学<span>(100293)</span></a>
						</td>
						<td>
							<a>散文<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>村上村树<span>(100293)</span></a>
						</td>
						<td>
							<a>诗歌<span>(100293)</span></a>
						</td>
						<td>
							<a>童话<span>(100293)</span></a>
						</td>
						<td>
							<a>儿童文学<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>古典文学<span>(100293)</span></a>
						</td>
						<td>
							<a>名著<span>(100293)</span></a>
						</td>
						<td>
							<a>王小波<span>(100293)</span></a>
						</td>
						<td>
							<a>杂文<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>余华<span>(100293)</span></a>
						</td>
						<td>
							<a>张爱玲<span>(100293)</span></a>
						</td>
						<td>
							<a>当代文学<span>(100293)</span></a>
						</td>
						<td>
							<a>钱钟书<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>外国名著<span>(100293)</span></a>
						</td>
						<td>
							<a>鲁迅<span>(100293)</span></a>
						</td>
						<td>
							<a>诗歌<span>(100293)</span></a>
						</td>
						<td>
							<a>茨威格<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>米兰·昆德拉<span>(100293)</span></a>
						</td>
						<td>
							<a>杜拉斯<span>(100293)</span></a>
						</td>
						<td>
							<a>港台<span>(100293)</span></a>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div id="wrap3" class="hide wrap-box type_wrap">
				<div>
					文化社科······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>历史<span>(100293)</span></a>
						</td>
						<td>
							<a>心理学<span>(100293)</span></a>
						</td>
						<td>
							<a>哲学<span>(100293)</span></a>
						</td>
						<td>
							<a>传记<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>文化<span>(100293)</span></a>
						</td>
						<td>
							<a>社会学<span>(100293)</span></a>
						</td>
						<td>
							<a>艺术<span>(100293)</span></a>
						</td>
						<td>
							<a>社会<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>设计<span>(100293)</span></a>
						</td>
						<td>
							<a>政治<span>(100293)</span></a>
						</td>
						<td>
							<a>建筑<span>(100293)</span></a>
						</td>
						<td>
							<a>宗教<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>电影<span>(100293)</span></a>
						</td>
						<td>
							<a>政治学<span>(100293)</span></a>
						</td>
						<td>
							<a>数学<span>(100293)</span></a>
						</td>
						<td>
							<a>中国历史<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>回忆录<span>(100293)</span></a>
						</td>
						<td>
							<a>思想<span>(100293)</span></a>
						</td>
						<td>
							<a>国学<span>(100293)</span></a>
						</td>
						<td>
							<a>人物传记<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>人文<span>(100293)</span></a>
						</td>
						<td>
							<a>音乐<span>(100293)</span></a>
						</td>
						<td>
							<a>艺术史<span>(100293)</span></a>
						</td>
						<td>
							<a>绘画<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>戏剧<span>(100293)</span></a>
						</td>
						<td>
							<a>西方哲学<span>(100293)</span></a>
						</td>
						<td>
							<a>二战<span>(100293)</span></a>
						</td>
						<td>
							<a>	军事<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>佛教<span>(100293)</span></a>
						</td>
						<td>
							<a>近代史<span>(100293)</span></a>
						</td>
						<td>
							<a>考古<span>(100293)</span></a>
						</td>
						<td>
							<a>自由主义<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>美术<span>(100293)</span></a>
						</td>
					</tr>
					</tbody>

				</table>
			</div>
			<div id="wrap4" class="hide wrap-box type_wrap">

				<div>
					科学技术······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>科普<span>(100293)</span></a>
						</td>
						<td>
							<a>互联网<span>(100293)</span></a>
						</td>
						<td>
							<a>编程<span>(100293)</span></a>
						</td>
						<td>
							<a>科学<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>交互设计<span>(100293)</span></a>
						</td>
						<td>
							<a>用户体验<span>(100293)</span></a>
						</td>
						<td>
							<a>算法<span>(100293)</span></a>
						</td>
						<td>
							<a>科技<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>web<span>(100293)</span></a>
						</td>
						<td>
							<a>UE<span>(100293)</span></a>
						</td>
						<td>
							<a>交互<span>(100293)</span></a>
						</td>
						<td>
							<a>通信<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>UCD<span>(100293)</span></a>
						</td>
						<td>
							<a>神经网络<span>(100293)</span></a>
						</td>
						<td>
							<a>程序<span>(100293)</span></a>
						</td>
					</tr>
					</tbody>

				</table>
			</div>
			<div id="wrap5" class="hide wrap-box type_wrap">

				<div>
					生活休闲······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>爱情<span>(100293)</span></a>
						</td>
						<td>
							<a>旅行<span>(100293)</span></a>
						</td>
						<td>
							<a>成长<span>(100293)</span></a>
						</td>
						<td>
							<a>生活<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>心理<span>(100293)</span></a>
						</td>
						<td>
							<a>励志<span>(100293)</span></a>
						</td>
						<td>
							<a>女性<span>(100293)</span></a>
						</td>
						<td>
							<a>摄影<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>教育<span>(100293)</span></a>
						</td>
						<td>
							<a>职场<span>(100293)</span></a>
						</td>
						<td>
							<a>美食<span>(100293)</span></a>
						</td>
						<td>
							<a>游记<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>灵修<span>(100293)</span></a>
						</td>
						<td>
							<a>健康<span>(100293)</span></a>
						</td>
						<td>
							<a>情感<span>(100293)</span></a>
						</td>
						<td>
							<a>两性<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>人际关系<span>(100293)</span></a>
						</td>
						<td>
							<a>手工<span>(100293)</span></a>
						</td>
						<td>
							<a>养生<span>(100293)</span></a>
						</td>
						<td>
							<a>家居<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>自助游<span>(100293)</span></a>
						</td>

					</tr>
					</tbody>

				</table>
			</div>
			<div id="wrap6" class="hide wrap-box type_wrap">
				<div>
					流行小说······
				</div>
				<table>
					<tbody>
					<tr>
						<td>
							<a>漫画<span>(100293)</span></a>
						</td>
						<td>
							<a>推理<span>(100293)</span></a>
						</td>
						<td>
							<a>绘本<span>(100293)</span></a>
						</td>
						<td>
							<a>青春<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>东野圭吾<span>(100293)</span></a>
						</td>
						<td>
							<a>科幻<span>(100293)</span></a>
						</td>
						<td>
							<a>言情<span>(100293)</span></a>
						</td>
						<td>
							<a>悬疑<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>奇幻<span>(100293)</span></a>
						</td>
						<td>
							<a>武侠<span>(100293)</span></a>
						</td>
						<td>
							<a>日本漫画<span>(100293)</span></a>
						</td>
						<td>
							<a>推理小说<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>韩寒<span>(100293)</span></a>
						</td>
						<td>
							<a>耽美<span>(100293)</span></a>
						</td>
						<td>
							<a>亦舒<span>(100293)</span></a>
						</td>
						<td>
							<a>网络小说<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>三毛<span>(100293)</span></a>
						</td>
						<td>
							<a>安妮宝贝<span>(100293)</span></a>
						</td>
						<td>
							<a>阿加莎·克里斯蒂<span>(100293)</span></a>
						</td>
						<td>
							<a>科幻小说<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>金庸<span>(100293)</span></a>
						</td>
						<td>
							<a>穿越<span>(100293)</span></a>
						</td>
						<td>
							<a>郭金明<span>(100293)</span></a>
						</td>
						<td>
							<a>轻小说<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>青春文学<span>(100293)</span></a>
						</td>
						<td>
							<a>魔幻<span>(100293)</span></a>
						</td>
						<td>
							<a>几米<span>(100293)</span></a>
						</td>
						<td>
							<a>	幾米<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>张晓兰<span>(100293)</span></a>
						</td>
						<td>
							<a>J.K.罗琳<span>(100293)</span></a>
						</td>
						<td>
							<a>古龙<span>(100293)</span></a>
						</td>
						<td>
							<a>高木直子<span>(100293)</span></a>
						</td>
					</tr>
					<tr>
						<td>
							<a>苍月<span>(100293)</span></a>
						</td>
						<td>
							<a>校园<span>(100293)</span></a>
						</td>
						<td>
							<a>落落<span>(100293)</span></a>
						</td>
						<td>
							<a>张悦然<span>(100293)</span></a>
						</td>
					</tr>
					</tbody>

				</table>
			</div>
			<!-- 轮播图 -->
			<div id="carousel" class="show carousel slide full-box"
				data-ride="carousel">
				<!-- Indicators -->
				<ol id="slide-carousel-indicators" class="carousel-indicators">
                    <%--@elvariable id="slideList" type="java.util.List"--%>
                    <c:forEach var="i" begin="0" end="${fn:length(slideList) - 1}" step="1">
                        <li data-target="#carousel" data-slide-to="${i}" class="${i == 0 ? "active" : ""}"></li>
                    </c:forEach>
				</ol>

				<!-- Wrapper for slides -->
				<div id="slide-content" class="carousel-inner full-box" role="listbox">
                    <c:forEach var="i" begin="0" end="${fn:length(slideList) - 1}" step="1">
                        <div class="item full-box ${i == 0 ? "active" : ""}">
                            <img src="${slideList[i].image}" class="img-contain" cli="${slideList[i].click}" style="height: 100%"/>
                            <div class="carousel-caption"></div>
                        </div>
                    </c:forEach>
				</div>

				<!-- Controls 左右两边的控制 -->
				<a class="left carousel-control" href="#carousel" role="button"
					data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#carousel" role="button"
					data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</div>

	<div id="recommend-list" class="container" style="margin-top: 20px;">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">推荐图书</h3>
			</div>
			<div class="panel-body">
				<div id="carousel-recommend" class="carousel slide"
					data-ride="carousel">
					<ol id="recommend-list-indicators" class="carousel-indicators">
                        <c:forEach var="i" begin="0" end="${fn:length(recommend['normal']) -1}" step="12">
                            <li data-target="#carousel-recommend" data-slide-to="${i/12}" class="${i == 0 ? "active" : ""}" style="background: red;"></li>
                        </c:forEach>
					</ol>
					<div id="recommend-inner" class="carousel-inner" role="listbox">
                        <c:forEach var="i" begin="0" end="${fn:length(recommend['normal']) -1}" step="12">
                            <div class="item ${i == 0 ? "active" : ""}" id="recommend-book-item-${i/12}">
                                <c:forEach var="j" begin="${i}" end="${(i+11) > (fn:length(recommend['normal'])-1) ?
                                (fn:length(recommend['normal'])-1) : (i+11)}" step="1">
                                    <c:set var="boo" value="${recommend['normal'][j]}" scope="page"/>
                                    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 book-wrap">
                                        <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                            <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                            <p>${boo.title}</p>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </c:forEach>
					</div>

					<!-- Controls 左右两边的控制 -->
					<a class="left carousel-control" href="#carousel-recommend"
						role="button" data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#carousel-recommend"
						role="button" data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
		</div>
	</div>

	<div id="type-recommend" class="container">
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#home1"
				aria-controls="home1" role="tab" data-toggle="tab">经济管理</a></li>
			<li role="presentation"><a href="#home2" aria-controls="home2"
				role="tab" data-toggle="tab">文学艺术</a></li>
			<li role="presentation"><a href="#home3" aria-controls="home3"
				role="tab" data-toggle="tab">人文社科</a></li>
			<li role="presentation"><a href="#home4" aria-controls="home4"
				role="tab" data-toggle="tab">科学技术</a></li>
			<li role="presentation"><a href="#home5" aria-controls="home5"
				role="tab" data-toggle="tab">生活休闲</a></li>
			<li role="presentation"><a href="#home6" aria-controls="home6"
				role="tab" data-toggle="tab">考试教育</a></li>
		</ul>

		<div class="col-md-9">
			<div class="tab-content">
				<div id="home1" role="tabpanel" class="tab-pane active fade in">
					<div id="carousel1" class="carousel slide" data-ride="carousel">
						<div id="economy-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['economy']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="economy-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['economy'])-1) ?
                                    (fn:length(recommend['economy'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['economy'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel1"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel1"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div id="home2" role="tabpanel" class="tab-pane fade">
					<div id="carousel2" class="carousel slide"
						data-ride="carousel">
						<div id="letter-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['letter']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="letter-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['letter'])-1) ?
                                    (fn:length(recommend['letter'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['letter'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel2"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel2"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div id="home3" role="tabpanel" class="tab-pane fade">
					<div id="carousel3" class="carousel slide" data-ride="carousel">
						<div id="cultural-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['culture']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="culture-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['culture'])-1) ?
                                    (fn:length(recommend['culture'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['culture'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel3"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel3"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div id="home4" role="tabpanel" class="tab-pane fade">
					<div id="carousel4" class="carousel slide" data-ride="carousel">
						<div id="science-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['science']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="science-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['science'])-1) ?
                                    (fn:length(recommend['science'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['science'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel4"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel4"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div id="home5" role="tabpanel" class="tab-pane fade">
					<div id="carousel5" class="carousel slide" data-ride="carousel">
						<div id="live-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['live']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="live-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['live'])-1) ?
                                    (fn:length(recommend['live'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['live'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel5"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel5"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div id="home6" role="tabpanel" class="tab-pane fade">
					<div id="carousel6" class="carousel slide" data-ride="carousel">
						<div id="exam-inner" class="carousel-inner" role="listbox">
                            <c:forEach var="i" begin="0" end="${fn:length(recommend['exam']) -1}" step="8">
                                <div class="item ${i == 0 ? "active" : ""}" id="exam-book-item-${i/8}">
                                    <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['exam'])-1) ?
                                    (fn:length(recommend['exam'])-1) : (i+7)}" step="1">
                                        <c:set var="boo" value="${recommend['exam'][j]}" scope="page"/>
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                            <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                <p>${boo.title}</p>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </c:forEach>
						</div>
						<!-- Controls 左右两边的控制 -->
						<a class="left carousel-control" href="#carousel6"
							role="button" data-slide="prev" style="margin-left: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a> <a class="right carousel-control" href="#carousel6"
							role="button" data-slide="next" style="margin-right: -15px;margin-top:0;">
							<span class="glyphicon glyphicon-chevron-right"
							aria-hidden="true"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
			</div>
		</div>

		<div id="type-recommend-list2" class="col-md-3"
			style="height: 500px; padding: 0; position: relative; overflow: hidden;">
			<div id="type-recommend-scroll"
				style="overflow: auto; height: 100%; width: calc(100% + 15px)">
				<div id="type-small-book-inner" style="width: 100%">
                    <c:forEach var="i" begin="1" end="${fn:length(recommend['normal'])}" step="1" >
                        <c:set var="book" value="${recommend['normal'][i-1]}" scope="page"/>
                        <div class="smallBook" bookid="${book.id}" isbn13="${book.isbn13}" data-toggle="tooltip" data-placement="left" title="${book.title}">
                            <div>${i}</div>
                            <img src="${book.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                            <div>
                                <div>${book.title}&nbsp;${book.subtitle}</div>
                                <div>${book.author == null || book.author eq '' ? "无" : book.author}</div>
                                <div>ISBN:${book.isbn13 == null || isbn13 eq '' ? "无" : book.isbn13}</div>
                            </div>
                        </div>
                    </c:forEach>
				</div>
			</div>
		</div>

	</div>

	<div id="new-book-recommend" class="container"
		style="margin-top: 30px;">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<p class="panel-title">New</p>
			</div>

			<div class="panel-body">
				<div class="col-md-3"
					style=" height: 500px; overflow: hidden; padding-left: 0; padding-right: 0;">
					<div id="new-recommend-scroll"
						style="overflow-y: auto; overflow-x: hidden; height: 100%; width: calc(100% + 15px)">
						<div id="new-small-book-inner" style="width: 100%">
                            <c:forEach var="i" begin="1" end="${fn:length(recommend['new'])}" step="1" >
                                <c:set var="book" value="${recommend['new'][i-1]}" scope="page"/>
                                <div class="smallBook" bookid="${book.id}" isbn13="${book.isbn13}" data-toggle="tooltip" data-placement="left" title="${book.title}">
                                    <div>${i}</div>
                                    <img src="${book.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                    <div>
                                        <div>${book.title}&nbsp;${book.subtitle}</div>
                                        <div>${book.author == null || book.author eq '' ? "无" : book.author}</div>
                                        <div>ISBN:${book.isbn13 == null || isbn13 eq '' ? "无" : book.isbn13}</div>
                                    </div>
                                </div>
                            </c:forEach>
						</div>
					</div>
				</div>

				<div class="col-md-9">
					<div class="tab-content">
						<div id="newRecommendList" role="tabpanel"
							class="tab-pane active fade in">
							<div id="carouse-new-recommend" class="carousel slide"
								data-ride="carousel">
								<div id="newInner" class="carousel-inner" role="listbox">
                                    <c:forEach var="i" begin="0" end="${fn:length(recommend['new']) -1}" step="8">
                                        <div class="item ${i == 0 ? "active" : ""}" id="new-book-item-${i/8}">
                                            <c:forEach var="j" begin="${i}" end="${(i+7) > (fn:length(recommend['new'])-1) ?
                                            (fn:length(recommend['new'])-1) : (i+7)}" step="1">
                                                <c:set var="boo" value="${recommend['new'][j]}" scope="page"/>
                                                <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 book-wrap">
                                                    <div class="book thumbnail" bookid = "${boo.id}" data-toggle="tooltip" data-placement="left" title="${boo.title}">
                                                        <img src="${boo.smallImage}" onerror="this.src='${path}/images/default-book.png'" />
                                                        <p>${boo.title}</p>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </c:forEach>
								</div>
								<!-- Controls 左右两边的控制 -->
								<a class="left carousel-control" href="#carouse-new-recommend"
									role="button" data-slide="prev" style="margin-left: -15px;">
									<span class="glyphicon glyphicon-chevron-left"
									aria-hidden="true"></span> <span class="sr-only">Previous</span>
								</a> <a class="right carousel-control" href="#carouse-new-recommend"
									role="button" data-slide="next" style="margin-right: -30px;">
									<span class="glyphicon glyphicon-chevron-right"
									aria-hidden="true"></span> <span class="sr-only">Next</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<div id="tail-box">
		<div class="container">
			<div class="col-md-6 col-md-offset-3">
				<div></div>
			</div>
		</div>
	</div>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script type="text/javascript" src="${path}/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="${path}/js/sweetalert2.min.js"></script>
	<script type="text/javascript" src="${path}/js2/page-index.js"></script>
	<script type="text/javascript" src="${path}/js2/autoScroll.js"></script>

	<script type="text/javascript">
		$(function(){
            Books.index.inited.init();
            Books.index.init("${path}");
            Books.index.register.init();
            new Scroll().init("#type-recommend-scroll");
            new Scroll().init("#new-recommend-scroll");
		});
	</script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${path}/js/bootstrap.min.js"></script>

	<%--<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->--%>
    <%--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>--%>
</body>
</html>